<style>
    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

    .open-form .layui-input-block{
        margin-left: 145px;
    }
    .open-form .layui-form-label {
        width: 115px;
    }

    .addProductionPlanForm-title .title, .examineProductionPlanForm-title .title {
        display: inline-block;
        margin: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 19px;
        position: relative;
        padding: 6px 0 19px 0;
    }

    .addProductionPlanForm-title .title:after, .examineProductionPlanForm-title .title:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% + 6px);
        height: 3px;
        background: #0A8B0A;
    }
</style>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="requirePlanInfoFrom" class="layui-form open-form">
    <div class="open-model">
        <div class="open-auto">

            <div class="layui-form-item layui-row">
                <input type="text" class="layui-input" placeholder="派工id" id="id"  style="display:none;"
                       name="id"/>

                <div class="layui-col-md3">
                    <label class="layui-form-label">所属车间：</label>
                    <div class="layui-input-block">
                        <select id="deviceWorkshopName" name="deviceWorkshopName" lay-filter="deviceWorkshopName" lay-search></select>
                    </div>
                </div>


                <div class="layui-col-md3">
                   <label class="layui-form-label">考勤组：</label>
                    <div class="layui-input-block">
                        <select id="attendanceGroupName" name="attendanceGroupName" lay-filter="attendanceGroupName" lay-search></select>
                    </div>
                </div>



                <div class="layui-col-md3">
                    <label class="layui-form-label">派工日期：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" placeholder="派工日期" id="dispatchWorkDate"
                               name="dispatchWorkDate">
                    </div>
                </div>



                <div class="layui-col-md3">
                    <label class="layui-form-label">排班班次：</label>
                    <div class="layui-input-block">
                        <input type="text" id="banCount" name="banCount"   class="layui-input" disabled
                               placeholder="排班班次">
                    </div>
                </div>
            </div>



            <div class="layui-form-item layui-row">

                <div class="layui-col-md3">
                    <label class="layui-form-label">岗位数量：</label>
                    <div class="layui-input-block">
                        <input type="text" id="workStationPostCount" name="workStationPostCount"   class="layui-input" disabled
                               placeholder="岗位数量">
                    </div>
                </div>

                <div class="layui-col-md3">
                    <label class="layui-form-label">工位数量：</label>
                    <div class="layui-input-block">
                        <input type="text" id="dispatchWorkCount" name="dispatchWorkCount"   class="layui-input" disabled
                               placeholder="工位数量">
                    </div>
                </div>

                <div class="layui-col-md3">

                    <label class="layui-form-label">审核人：</label>
                    <div class="layui-input-block">
                        <select id="auditPerson" name="auditPerson" lay-filter="auditPerson" lay-search></select>
                    </div>
                </div>
             </div>


            <div class="examineProductionPlanForm-title">
                <h3 class="title">工位信息</h3>
            </div>
            <div class="layui-form-item layui-row">
               <!-- <button type="button" id="addPlanItem" class="layui-btn" lay-filter="addPlanItem"
                >添加生产物料
                </button>-->
                <div id="demandDay">
                    <table class="layui-table" id="requireItemTable" lay-filter="requireItemTable"></table>
                </div>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="saveDispatchWorkFormSubmit" lay-submit>提交</button>
        </div>

    </div>


</form>

<script type="text/html" id="viewAttachmentHtml">
    <div id="example1" style="height: 100%;"></div>
</script>


<script type="text/html" id="productTableBar">
    <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="selectDutyUser">选择责任人</a>
 </script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;
        var laytpl = layui.laytpl;
        let skuInfoObj = new Map()
        let planItemData = [];

        laydate.render({
            elem: '#dispatchWorkDate'
            , type: 'datetime'
        });


        //初始化计划表
        table.render({
            elem: '#requireItemTable',
            data: planItemData,
            id: 'requireItemTable',
            limit: 9999,
            cols: [[
                  {type: 'numbers', title: '序号', width: 80}
                , {field: 'code', align: 'center', edit: 'text', title: '工位'}
                , {field: 'name', align: 'center', title: '工位名称', hide: false}
                , {field: 'natureName', align: 'center', edit: 'text', title: '工位性质'}
                , {field: 'nature', align: 'center', edit: 'text', title: '工位性质id', hide: true}
                , {field: 'postName', align: 'center', edit: 'text', title: '责任岗位'}
                , {field: 'postId', align: 'center', edit: 'text', title: '责任岗位id', hide: true}
                , {field: 'className', align: 'center', edit: 'text', title: '班次'}
                , {field: 'workBeginTime', align: 'center', edit: 'text', title: '上班时间'}
                , {field: 'workEndTime', align: 'center', edit: 'text', title: '下班时间'}
                ,{field: 'dutyUserId', align: 'center', title: '责任人id', hide: true}
               , {field: 'dutyUserName', align: 'center',  title: '责任人'}
                , {align: 'center', toolbar: '#productTableBar', title: '操作'}
            ]]
        });

        laydate.render({
            elem: '#planReceiveTime'
            , type: 'datetime'
        });

        //审核人
        admin.initDataSelect("user/admin/user/list", {limit: 99999}, "auditPerson", null, "审核人", 'nickname', null);
        admin.req('enterprise/product/admin/productDispatchWork/getDeviceWorkshopList/',{},(res)=>{
             if(res.code===200){
                console.log(res.data);
                $('#deviceWorkshopName').empty().append(new Option('请选择...', '', false, false));
                for(let i=0; i<res.data.length; i++){
                    let option = new Option(res.data[i].name, res.data[i].id);
                    // 将新选项添加到 select 中
                    $('#deviceWorkshopName').append(option);
                }
            }
        })

        admin.req('enterprise/product/admin/productDispatchWork/selAllGroupList/',{},(res)=>{
             if(res.code===200){
                console.log(res.data);
                 // 清空原有的选项，并添加一个默认的空选项
                $('#attendanceGroupName').empty().append(new Option('请选择...', '', false, false));

                for(let i=0; i<res.data.length; i++){
                    let option = new Option(res.data[i].groupName, res.data[i].groupId);
                    // 将新选项添加到 select 中
                    $('#attendanceGroupName').append(option);
                }
            }
        })



        //选择考勤后触发对应的工位信息
        function  selCheckGroupGetDispatch(){


            let selectedOption = $('#attendanceGroupName option:selected');

            // 获取选中的 id (groupId) 和 name (groupName)
            let attendanceGroupId = selectedOption.val();
            let attendanceGroupName = selectedOption.text();


            let selectedOption2 = $('#deviceWorkshopName option:selected');


            let deviceWorkshopId = selectedOption2.val();
            let deviceWorkshopName = selectedOption2.text();

            console.log(attendanceGroupName);
            //获取下面表格排班数据
            selCheckGroupGetDispatchTable(deviceWorkshopId,attendanceGroupId);

            //派工-获取顶部岗位数和工位数和班次数
            getTopData(deviceWorkshopId,attendanceGroupId);
        }

       // 监听 select 元素的变化
        form.on('select(attendanceGroupName)', function(){
            // 在这里执行你需要的操作，比如调用 selCheckGroupGetDispatch 函数
            selCheckGroupGetDispatch();
        });

        // 监听 select 元素的变化
        form.on('select(deviceWorkshopName)', function(){
            // 在这里执行你需要的操作，比如调用 selCheckGroupGetDispatch 函数
            selCheckGroupGetDispatch();
        });


        //获取下面表格排班数据
        function  selCheckGroupGetDispatchTable(deviceWorkshopId, attendanceGroupId){
           admin.req('enterprise/product/admin/productDispatchWork/getCheckDeviceWorkToAttendanceTime', {workshopId: deviceWorkshopId,groupId: attendanceGroupId}, function (res) {
                if (res.code == 200) {
                    planItemData = [];
                    for (const resKey in res.data) {
                       planItemData.push(res.data[resKey]);
                    }
                    table.reload('requireItemTable', {
                        data: planItemData
                    })
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            })

        }

        table.on('tool(requireItemTable)', function (obj) {
            let dispatchWorkDate = $('#dispatchWorkDate').val();
            if(dispatchWorkDate==undefined || dispatchWorkDate=='' || dispatchWorkDate==null){
               return  layer.msg('请选择派工日期');
            }

            if(obj.event === 'selectDutyUser'){
               admin.req('enterprise/product/admin/productDispatchWork/getDispatchWorkUserInfo', {postId: obj.data.postId,groupId: obj.data.groupId,dispatchWorkDate:dispatchWorkDate}, function (res) {
                  if (res.code == 200) {
                        let optionsHtml = '';
                        res.data.forEach(function(item){
                            optionsHtml += '<option value="'+ item.userId +'">'+ item.nickname +'</option>';
                        });
                         layer.open({
                            type: 1,
                            title:"责任人信息",
                            area: ['500px', '220px'],
                            content: '<form class="layui-form layui-form-pane" style="padding: 20px;">' +
                                '<div class="layui-row">' +
                                '<div class="layui-col-md12">' +
                                '<label class="layui-form-label">责任人：</label>' +
                                '<div class="layui-input-block">' +
                                '<select id="dutyUserName" name="dutyUserName" lay-filter="dutyUserName" lay-search>' +
                                optionsHtml +
                                '</select></div></div></div></form>',
                            success: function(){
                                form.render('select'); // 重新渲染选择框
                            },
                            btn: ['确定', '取消'],
                            yes: function(index, layero){
                                let dutyUserId = layero.find('#dutyUserName').val();
                                let dutyUserName = layero.find('#dutyUserName').text();
                                obj.update({
                                    dutyUserId: dutyUserId,
                                    dutyUserName:dutyUserName
                                });
                                layer.close(index);
                            }
                        });
                    } else {
                        layer.msg("获取责任人信息失败", {icon: 2});
                    }
                })

            }
        });



        //派工-获取顶部岗位数和工位数和班次数
        function getTopData(deviceWorkshopId,attendanceGroupId){
            admin.req('enterprise/product/admin/productDispatchWork/getTopDispatchCount', {workshopId: deviceWorkshopId,groupId: attendanceGroupId}, function (res) {
                if (res.code == 200) {
                    $("#workStationPostCount").val(res.data.workStationPostCount);
                    $("#banCount").val(res.data.banCount);
                    $("#dispatchWorkCount").val(res.data.dispatchWorkCount);
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            })
        }


        //表单提交事件
        form.on('submit(saveDispatchWorkFormSubmit)', function (d) {
            //获取车间信息
            let selectedOption2 = $('#deviceWorkshopName option:selected');
            let deviceWorkshopId = selectedOption2.val();
            let deviceWorkshopName = selectedOption2.text();

            //获取考勤组信息
            let selectedOption = $('#attendanceGroupName option:selected');
            let attendanceGroupId = selectedOption.val();
            let attendanceGroupName = selectedOption.text();

            //审核人信息获取
            let auditPersonSelection=$('#auditPerson option:selected');
            let auditPersonId = auditPersonSelection.val();
            let auditPersonName = auditPersonSelection.text();

            if(deviceWorkshopId==undefined || deviceWorkshopId==null || deviceWorkshopId==""){
                return  layer.msg('请选择车间信息');
            }
            if(attendanceGroupId==undefined || attendanceGroupId==null || attendanceGroupId==""){
                return  layer.msg('请选择考勤组信息');
            }
            if(auditPersonId==undefined || auditPersonId==null || auditPersonId==""){
                return  layer.msg('请选择审核人');
            }
            let dispatchWorkDate = $('#dispatchWorkDate').val();
            if(dispatchWorkDate==undefined || dispatchWorkDate=='' || dispatchWorkDate==null){
                return  layer.msg('请选择派工日期');
            }
            layer.load(2);
            let cacheElement = table.cache['requireItemTable'];
            let data = [];
            for (const key in cacheElement) {
                data.push(cacheElement[key])
            }

            d.field.dispatchWorkInfoDetailFormList  = data;
            d.field.deviceWorkshopId=deviceWorkshopId;
            d.field.attendanceGroupId=attendanceGroupId;
            d.field.deviceWorkshopName=deviceWorkshopName;
            d.field.attendanceGroupName=attendanceGroupName;
            d.field.auditPersonId=auditPersonId;
            d.field.auditPersonName=auditPersonName;

            admin.req('enterprise/product/admin/productDispatchWork/saveDispatchWorkInfo', JSON.stringify(d.field), function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {

                    layer.msg(res.msg, {icon: 1});
                    table.reload('requirePlanInfo');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST', true, 'application/json; charset=utf-8');
        });


    });
</script>